<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>布局</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0
        }
        .left{
            width: 200px;
            height: 500px;
            background: #cccccc;
            /*设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。*/
            /*绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。*/
            /*对于定位的主要问题是要记住每种定位的意义。
            所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。*/
            /*如果将这里的绝对定位注释掉，各个div元素完全是在文档流中*/
            position: absolute;
            left:0;
            top:0;
            /*float:left;*/
        /*这里不能用左浮动，当浏览器宽度小于body内容的总宽度时，浮动内容将会覆盖其他内容*/
        }
        /*浮动是不可以的，浮动以后页面乱了。需要用其他的方法来实现让他们排在一行当中。*/
        /*
        怎么来做？
        把所有的浮动都删掉，这个案例当中用到定位的方法。
        首先把左侧div定义为绝对定位，让他停靠在浏览器左侧
        然后把右侧div定义为绝对定位，让他停靠在浏览器右侧
        中间div左右都给他增加一些margin就可以了：margin:0 300px 0 200px
        */
        .middle{
            /*自适应的要把宽度去掉*/
            height: 500px;
            background: #999999;
            margin: 0 300px 0 200px;
        }
        .right{
            width: 300px;
            height: 500px;
            background:#dddddd;
            position: absolute;
            right: 0;
            top:0
            /*float:right;*/
            /*这里不能用右浮动，rightdiv将会排列在middle下方*/
        }
    </style>
</head>
<body>
<div class="left">200px</div>
<div class="middle">
    设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志进行排版布局。
    虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础仍然是必须学习和掌握的。
    它们的基本原理是共通的，你可以领会要点，举一反三。
</div>
<div class="right">300px</div>
</body>
</html>